<!-- 教学资料页 -->
<template>
	<view>
		<view class="main">
			<!-- 搜索框 start -->
			<view class="search">
				<image src="../../static/icon/search.png" mode=""></image>
				<input type="text" value="" placeholder="搜索文件" />
			</view>
			<!-- 搜索框 end -->

			<!-- 科目导航菜单 start -->
			<scroll-view scroll-x="true" class="sub" :show-scrollbar="false" :enhanced="true">
				<navigator url="../addSub/addSub" class="manage" hover-class="manage_hover">
					<image src="../../static/icon/manage.png" mode="">管理</image>
				</navigator>
				<view class="sub_name" :class="currentIndex == index?'active':''" v-for="(item,index) in fileList"
					:key="index" @click="chooseItem(index)">
					{{item.name}}
				</view>
			</scroll-view>
			<!-- 科目导航菜单 end -->

			<!-- 文件内容 start -->
			<view class="sub_content" v-for="i in 10">
				<view class="sub_content_file">
					<image src="../../static/icon/word.png" mode=""></image>
					<view class="sub_file-content">
						<view style="font-weight: bold;">{{title}}</view>
						<text>2021-04-12 17:02</text>
						<text>57.9M</text>
					</view>
					<view class="sub_more" @click="handleClick">
						...
					</view>
				</view>

			</view>
			<!-- 文件内容 end -->

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0, //当前选项下标
				title: '文件名称',
				fileList: [ //选项列表
					{
						id: 0,
						name: '全部'
					}, {
						id: 1,
						name: '数学'
					}, {
						id: 2,
						name: '英语'
					}, {
						id: 3,
						name: '地理'
					},
					{
						id: 4,
						name: '语文'
					}
				],

			}
		},
		// props:['fileList'],
		methods: {
			// tab切换
			chooseItem(index) {
				this.currentIndex = index
			},

			//底部弹框
			handleClick() {
				uni.showActionSheet({
					itemList: ['分享', '下載', '重命名', '刪除'],
					success: function(res) {
						console.log(res.tapIndex)
						switch(res.tapIndex){
							case 0: {
								console.log('分享');
								// uni.showShareMenu({
								// 	withShareTicket:true,
								// 	title:'jhhhhhhh',
								// 	menus:['shareAppMessage','shareTimeline'],
								// });
							}break;
							case 1: {
								console.log('下載');
							}break;
							case 2: {
								console.log('重命名');
							}break;
							case 3: {
								console.log('刪除');
							}break;
						}
					},
					fail: function(res) {
						console.log(res.errMsg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 页面主体 */
	.main {
		background-color: #FFFFFF;
		padding: 30upx 10upx;
	}

	/* 搜索框 */
	.search {
		padding: 20upx;
		background-color: #eeeeee;
		border-radius: 20upx;
		margin-bottom: 30upx;
		font-size: 24upx;
		image {
			width: 48upx;
			height: 48upx;
			margin-right: 20upx;
		}
		input {
			width: 80%;
			display: inline-block;
			font-size: 32upx;
		}
	}
	/* 搜索框end */

	/* 科目tab */
	.sub {
		width: 100%;
		white-space: nowrap;
		margin-bottom: 30upx;
		font-size: 32upx;
	}
	.sub_name {
		display: inline-block;
		width: 120upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
		margin-right: 20upx;
		border-radius: 50upx;
		color: #8e929f;
		background-color: #eeeeee;
	}
	.active {
		background-color: rgba(0, 122, 255, .1);
		color: #007AFF;
	}

	/* 科目管理 */
	.manage {
		display: inline-block;
		color: #6f84aa;
		font-size: 28upx;
		font-weight: bold;
		margin-right: 20upx;
		image {
			width: 70upx;
			height: 70upx;
			vertical-align: middle;
		}
	}
	.manage_hover {
		opacity: .9;
		color: #007AFF;
	}
	/* 科目tab end */


	/* 主要文档内容 */
	.sub_content {
		width: 100%;
		padding: 20upx 0;
	}
	.sub_content_file {
		display: flex;
		justify-content: space-between;
		padding: 10upx 0;
		font-size: 28upx;
		image {
			width: 70upx;
			height: 70upx;
			margin: 0 10upx;
		}
	}

	/* 文档名称 发布时间 */
	.sub_file-content {
		flex: 6;
		line-height: 40upx;
		margin: 0 20upx;
		text {
			color: #acacac;
			font-size: 24upx;
			padding-right: 20upx;
		}
	}

	/* 更多 */
	.sub_more {
		line-height: 20upx;
		margin: 20upx;
		padding: 0 20upx;
		text-align: center;
		color: #7185ab;
		background-color: #eeeeee;
		border-radius: 10upx;
	}
	/* 文档内容end */
</style>
